<template>
  <div class="home-container">
    <!-- 动态背景 -->
    <div class="animated-bg">
      <div class="particle"></div>
      <div class="particle"></div>
      <div class="particle"></div>
    </div>
    <!-- 主视觉区 -->
    <section class="hero-section">
      <a-row :gutter="24" align="middle">
        <a-col :span="12" class="hero-content">
          <h1 class="animated-title">
            智能云图库
            <span class="gradient-text">VisionX</span>
          </h1>
          <p class="hero-description">
            下一代AI驱动的智能图像管理平台，重新定义您的视觉资产管理体验
          </p>
          <div class="cta-buttons">
            <a-button type="primary" size="large" class="gradient-btn" @click="router.push('/home')">
              <template #icon><cloud-download-outlined /></template>
              立即体验
            </a-button>
            <a-button size="large" class="demo-btn">
              <template #icon><video-camera-outlined /></template>
              观看演示
            </a-button>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="hero-image">
            <div class="floating-card">
<!--              英雄图片-->
              <img src="@/assets/hero-image.png" alt="AI Vision" />
            </div>
          </div>
        </a-col>
      </a-row>
    </section>

    <!-- 核心功能 -->
    <section class="features-section">
      <h2 class="section-title">核心优势</h2>
      <a-row :gutter="24" class="feature-cards">
        <a-col :span="8" v-for="(feature, index) in features" :key="index">
          <a-card hoverable class="feature-card">
            <template #cover>
              <div class="card-icon">
                <component :is="feature.icon" :style="{ fontSize: '48px' }" />
              </div>
            </template>
            <a-card-meta :title="feature.title" :description="feature.desc" />
          </a-card>
        </a-col>
      </a-row>
    </section>

    <!-- 动态演示 -->
    <section class="demo-section">
      <a-row :gutter="24" align="middle">
        <a-col :span="12">
          <div class="demo-image">
            <div class="hover-3d">
              <img src="@/assets/demo-screen.png" alt="Demo" />
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <h2 class="section-title">智能图像管理</h2>
          <a-list item-layout="horizontal" :data-source="demoFeatures">
            <template #renderItem="{ item }">
              <a-list-item>
                <template #actions>
                  <a-tag color="blue">{{ item.tag }}</a-tag>
                </template>
                <a-list-item-meta :description="item.desc">
                  <template #title>
                    <a-typography-text strong>{{ item.title }}</a-typography-text>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-col>
      </a-row>
    </section>

    <!-- 定价方案 -->
    <section class="pricing-section">
      <h2 class="section-title">灵活定价</h2>
      <a-row :gutter="24" class="price-cards">
        <a-col :span="8" v-for="(plan, index) in pricingPlans" :key="index">
          <div class="price-card" :class="{ featured: plan.featured }">
            <div class="price-header">
              <h3>{{ plan.name }}</h3>
              <div class="price">
                <span class="currency">¥</span>
                <span class="amount">{{ plan.price }}</span>
                <span class="period">/月</span>
              </div>
            </div>
            <a-divider />
            <ul class="plan-features">
              <li v-for="(feature, fIndex) in plan.features" :key="fIndex">
                <check-circle-outlined /> {{ feature }}
              </li>
            </ul>
            <a-button :type="plan.featured ? 'primary' : 'default'" block size="large">
              立即订阅
            </a-button>
          </div>
        </a-col>
      </a-row>
    </section>

    <!-- 页脚 -->
    <footer class="main-footer">
      <a-row :gutter="24">
        <a-col :span="8">
          <h3>VisionX</h3>
          <p>让视觉资产管理更智能</p>
        </a-col>
        <a-col :span="8">
          <h4>产品</h4>
          <a-list size="small" :data-source="footerLinks.product" />
        </a-col>
        <a-col :span="8">
          <h4>联系我们</h4>
          <a-list size="small" :data-source="footerLinks.contact" />
        </a-col>
      </a-row>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  AppstoreOutlined,
  DollarOutlined,
  CustomerServiceOutlined,
  CloudDownloadOutlined,
  VideoCameraOutlined,
  CheckCircleOutlined,
  // 修正以下图标名称
  CloudServerOutlined,      // 原 AiOutlineCloudServer
  FileSearchOutlined,       // 原 AiOutlineFileSearch
  TeamOutlined,             // 原 AiOutlineTeam
  SecurityScanOutlined,     // 原 AiOutlineSecurityScan
  RocketOutlined,           // 原 AiOutlineRocket
  DashboardOutlined         // 原 AiOutlineDashboard
} from '@ant-design/icons-vue';
import router from "@/router";

// 功能列表
const features = ref([
  {
    title: '智能分类',
    desc: '基于深度学习的自动图像分类系统',
    icon: FileSearchOutlined // 原 AiOutlineFileSearch
  },
  {
    title: '高速存储',
    desc: '分布式云存储保障数据安全',
    icon: CloudServerOutlined // 原 AiOutlineCloudServer
  },
  {
    title: '团队协作',
    desc: '实时多人协作编辑与管理',
    icon: TeamOutlined // 原 AiOutlineTeam
  },
]);

// 定价方案
const pricingPlans = ref([
  {
    name: '基础版',
    price: '299',
    features: ['10GB 存储空间', '基础AI功能', '5人团队', '基础支持'],
    featured: false
  },
  {
    name: '专业版',
    price: '599',
    features: ['50GB 存储空间', '高级AI功能', '20人团队', '优先支持'],
    featured: true
  },
  {
    name: '企业版',
    price: '定制',
    features: ['无限存储', '全功能套件', '专属客服', '定制开发'],
    featured: false
  }
]);

// 页脚链接
const footerLinks = ref({
  product: ['功能特性', '定价方案', '文档中心', '更新日志'],
  contact: ['support@visionx.com', '400-1234-5678', '在线客服', '加入我们']
});
</script>

<style scoped lang="less">
.home-container {
  position: relative;
  background: linear-gradient(150deg, #0f172a 0%, #1e293b 100%);
  color: white;
  min-height: 100vh;

  .animated-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    .particle {
      position: absolute;
      background: radial-gradient(circle, #3b82f6 0%, transparent 70%);
      animation: float 20s infinite linear;
    }
  }

  .nav-menu {
    background: transparent;
    border-bottom: none;
    padding: 0 10%;
    :deep(.ant-menu-item) {
      color: rgba(255,255,255,0.8);
      &:hover {
        color: white;
        &::after { border-color: #3b82f6 !important; }
      }
    }
  }

  .hero-section {
    padding: 120px 10% 200px;
    .hero-content {
      h1 {
        font-size: 4rem;
        .gradient-text {
          background: linear-gradient(45deg, #3b82f6, #8b5cf6);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .cta-buttons {
        margin-top: 40px;
        .gradient-btn {
          background: linear-gradient(45deg, #3b82f6, #8b5cf6);
          border: none;
          height: 50px;
          padding: 0 40px;
        }
      }
    }
    .floating-card {
      animation: float 6s ease-in-out infinite;
      img {
        width: 100%;
        filter: drop-shadow(0 20px 30px rgba(59,130,246,0.3));
      }
    }
  }

  .features-section {
    padding: 100px 10%;
    .feature-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.3s;
      &:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.3);
      }
      .card-icon {
        padding: 30px;
        text-align: center;
        color: #3b82f6;
      }
    }
  }

  .price-card {
    background: rgba(255,255,255,0.05);
    padding: 30px;
    border-radius: 16px;
    transition: all 0.3s;
    &.featured {
      transform: scale(1.05);
      background: linear-gradient(45deg, #3b82f6, #8b5cf6);
    }
    .price {
      font-size: 3rem;
      .currency { font-size: 1.5rem; }
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
  }
}
</style>
